<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-table.css">
<link rel="stylesheet" type="text/css" href="css/main_1.css">
<script type="text/javascript" src="js/jquery.js"></script>
<title>ECharts Demo</title>
<script type="text/javascript">
	window.EC_DEMO_LANG = 'cn';
</script>
<style type="text/css">
.showData {
	position: absolute;
	left: 183px;
	top: 74px;
	width: 921px;
	height: 421px;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	padding: 0px;
	margin: 0px;
	border-width: 0px;
}
</style>
<script type="text/javascript">
		function loadpi(json) {
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			option = {
				title : {
					text : '该学校最近几年变化',
					subtext : '数据由joblabx提供'
				},
				tooltip : {
					trigger : 'axis'
				},
				legend : {
					data : [ '最高人数', '最低人数' ]
				},
				toolbox : {
					show : true,
					feature : {
						dataZoom : {
							yAxisIndex : 'none'
						},
						dataView : {
							readOnly : false
						},
						magicType : {
							type : [ 'line', 'bar' ]
						},
						restore : {},
						saveAsImage : {}
					}
				},
				xAxis : {
					type : 'category',
					boundaryGap : false,
					data : json[0]
				},
				yAxis : {
					type : 'value',
					axisLabel : {
						formatter : '{value} 人'
					}
				},
				series : [ {
					name : '最高人生',
					type : 'line',
					data : json[1],
					markPoint : {
						data : [ {
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均值'
						} ]
					}
				} ]
			};
			if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}
		}
		function ajaxAction2() {
			$
					.ajax({
						type : "GET",
						url : "/joblabxtestback/ApiServlet?method=showStudentNumber&university="
								+ $("#dx").val(),
						contentType : "application/json;charset=utf-8",
						dataType : "json",
						json : 'callback',
						success : function(json) {
							loadpi(json)
						},
						error : function() {
							alert("请求数据失败,请检查网络状况");
						}
					});
		}

		
	</script>
</head>
<body style="height: 100%; margin: 0">
	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" data-toggle="collapse"
					data-target="#navbar-collapse" aria-expanded="false"
					class="navbar-toggle collapsed">
					<span class="sr-only">Toggle navigation</span><span
						class="icon-bar"></span><span class="icon-bar"></span><span
						class="icon-bar"></span>
				</button>

			</div>
			<div id="navbar-collapse" class="collapse navbar-collapse">

				<ul class="nav navbar-nav navbar-right">


				</ul>
			</div>
		</div>
	</nav>
	<script type="text/javascript">
		var selector = window.EC_DEMO_LANG === 'en' ? 'nav-start'
				: 'nav-examples';
		var menu = document.getElementById(selector);
		if (menu) {
			menu.className = 'active';
		}
	</script>
	<div id="left-chart-nav">
		<ul>
			<li><a href="default.html">搜索匹配</a>
			</li>
			<li><a href="line-simple.html">数据统计</a>
			</li>
			<li><a href="789.html">数据地图</a>
			</li>

		</ul>
	</div>
	<div class="container" style="margin-top: 5%;width: 52%;">
		<div class="row">
			<div class="col-xs-12 ">
				<input type="text" name="location" class="form-control" value="大学城市">
			</div>
			<div class="col-xs-12 ">
				<input type="text" id="dx" name="university" class="form-control"
					value="大学">
			</div>
			<div class="col-xs-12">
				<input type="button" onclick="ajaxAction2()" class="btn btn-info"
					value="查询">
			</div>
		</div>
	</div>
	<div id="container" class="showData" style="margin: 12%"></div>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
	<script type="text/javascript"
		src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
	<!-- <script type="text/javascript" src="js/456.js"></script> -->
	
</body>
</html>